<template>
<div>
    <div class="nav bg-theme color-f text-l themimg" v-show="showNavbar" style="display:flex;justify-content:space-between;">
     
        <div>
          <i class="iconfont icon-fanhui font19 pl08 iback" @click="gotoMobile"></i>
        </div>
          
            <!-- 详情进入 -->
            <!-- <span class="font19 ml16">
                
            </span> -->
        
          
          <div class="footer2">
              <!-- <img src="../../assets/images/themebg.png" alt="" style="width:156px;flex:1"  > -->
          </div>
        
       <div style="">
            <van-icon name="user-circle-o" color="#eee" style="margin-right:16px" size="20px"
            @click="gotoUserCenter"/>
          </div>  
    </div> 
    
    <div class="pageview">
      <component :is="tabviewName"></component>
      <!-- <van-tabbar v-model="active" @change="onTabChange" active-color="#F06F3F">
            <van-tabbar-item>
                <span>首页</span>
                <template #icon="props">
                    <img :src="props.active ?tabicon1.active :tabicon1.inactive">
                </template>    
            </van-tabbar-item>
            <van-tabbar-item>
                <span>版面目录</span>
                <template #icon="props">
                    <img :src="props.active ?tabicon2.active :tabicon2.inactive">
                </template>    
            </van-tabbar-item>
            <van-tabbar-item>
                <span>精华专区</span>
                <template #icon="props">
                    <img :src="props.active ?tabicon3.active :tabicon3.inactive">
                </template>    
            </van-tabbar-item>
            <van-tabbar-item>
                <span>个人中心</span>
                <template #icon="props">
                    <img :src="props.active ?tabicon4.active :tabicon4.inactive">
                </template>    
            </van-tabbar-item>
        </van-tabbar>   -->
    </div>   
      
</div>
  
</template>
<script>
import gongzuotai from '@/components/gongzuotai'
import tabview2 from '@/components/tabview2'
import tabview3 from '@/components/tabview3'
import usercenter from '@/components/usercenter'
import newhome from '@/components/newhome'
   export default{
       data() {
            return {
                tabviewName:'',
                active:0,
                tabicon1:{
                    active:require('../../assets/images/tab_home_incheck.png'),
                    inactive:require('../../assets/images/tab_home_uncheck.png')
                },
                tabicon2:{
                    active:require('../../assets/images/tab_menu_incheck.png'),
                    inactive:require('../../assets/images/tab_menu_uncheck.png')
                },
                tabicon3:{
                    active:require('../../assets/images/tab_hot_incheck.png'),
                    inactive:require('../../assets/images/tab_hot_uncheck.png')
                },
                tabicon4:{
                    active:require('../../assets/images/tab_center_incheck.png'),
                    inactive:require('../../assets/images/tab_center_uncheck.png')
                },
                showNavbar:true
               
            };
       },
       components:{
           gongzuotai,
           tabview2,
           tabview3,
           usercenter,
           newhome
       },
       created(){
           this.tabviewName=newhome;
       },
       mounted(){
            if (window.history && window.history.pushState) {
                console.log('main点击物理返回键1111');
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.gotoMobile, false);//false阻止默认事件
            }
       },
       methods:{
            gotoMobile(){
                console.log('main点击物理返回键222'),
                this.moaBridge_ha_djfupt.closeDoc({refresh:false,appcode:'yglt'});
            },
            onTabChange(index){
                   console.log('main点击物理返回键222'+index)
                   this.tabviewName='newhome'
                // if(index==0){
                //     this.active=0
                //     this.tabviewName='gongzuotai'
                //     this.showNavbar=true;
                // }else if(index==1){
                //     this.active=1
                //     this.tabviewName='tabview2'
                //     this.showNavbar=true;
                // }else if(index==2){
                //     this.active=2
                //     this.tabviewName='tabview3'
                //     this.showNavbar=true;
                // }else if(index==3){
                //     this.active=3
                //     this.tabviewName='usercenter'
                //     this.showNavbar=false;
                // }
            },gotoUserCenter(){
              this.$router.push({
                  name:'newcenter',
                  query:{

                  }
              })
            }
       },
       destroyed () {
            console.log('destroyeddestroyeddestroyed')
            window.removeEventListener('popstate',this.gotoMobile,false);//false阻止默认事件
       },
   }
</script>
<style scoped>
.pageview{
      height:100%;
      padding-top: 50px;
      font-size: 12px;
  }
  .themimg{
      background:url('../../assets/images/themebg.png') repeat;
      background-size:contain;
      background-repeat:no-repeat;
      background-size:100% 100%;
  }
  .footer2{
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  margin-left: 37px;
  padding-right: 74px;
}
</style>